<template>
  <ul class="selectcon">
    <!-- <li :class="{ active: active==2 }" @click="active=2,$emit('select',2)">
      <span class="txt">L2</span>
      <span class="line"></span>
      <span class="round"></span>
    </li>
    <span class="v-line" :style="{top:active==1?'30px': (active==2?'36px':'32px')}"></span>
    <li :class="{ active: active==1 }" @click="active=1,$emit('select',1)">
      <span class="txt">L1</span>
      <span class="line"></span>
      <span class="round"></span>
    </li>
    <span class="v-line" :style="{top:active=='b1'?'118px':'126px'}"></span>
    <li :class="{ active: active=='b1' }" @click="active='b1',$emit('select','b1')">
      <span class="txt">B1</span>
      <span class="line"></span>
      <span class="round"></span>
    </li> -->
    <li :class="{ active: active==1 }" @click="active=1,$emit('select',1)">19.2展馆</li>
    <li :class="{ active: active==2 }" @click="active=2,$emit('select',2)">20.2展馆</li>
  </ul>
</template>

<script>
export default {
  props:['select'],
  data(){
    return {
      active:this.select
    }
  },
  watch:{
    '$route':{
      deep:true,
      handler:function (newVal) {
        console.log(newVal);
        if (newVal != 'Home') {
          this.showselect = true
        }
        
      }
    }
  }
};
</script>

<style lang="less" scoped>
.selectcon {
  position: fixed;
  top: 58px;
  right: 30px;
  color: #fff;
  display:flex;
  justify-content: center;
  z-index: 1;
  > li {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 5px;
    margin-top: 52px;
    width:140px;
    height:50px;
    border:2px solid #fff;
    border-radius:25px;
    margin-right:30px;
    
  }
  
  .active {
    background:linear-gradient(180deg, #00D3F6 0%, #1B4FF6 100%);
  }
}
</style>
